<!-- 服务器列表卡片组件 -->
<template>
    <div class="card" @click="emit('click')">
        <!-- 左边条 -->
        <div class="left-side" :class="item.isRun ? '' : 'sidered'"></div>
        <!-- 右边内容 -->
        <div class="right-content">
            <!-- 标题和更多按钮 -->
            <div class="title-box">
                <span>{{ item.name }}</span>
                <div @click.stop>
                    <n-dropdown trigger="click" :options="options" :show-arrow="true" @select="handleSelect">
                        <i class="iconfont icon-gengduo"></i>
                    </n-dropdown>
                </div>

            </div>
            <!-- 其它描述信息 -->
            <div class="descriptor">
                <div>状&nbsp;&nbsp;&nbsp;&nbsp;态: <span class="lg" :class="item.isRun ? 'green' : 'red'">{{
                    item.isRun ? '运行中' : '未运行' }}</span></div>
                <div>类&nbsp;&nbsp;&nbsp;&nbsp;型:<span class="lg">{{ item.type }}</span></div>
                <div>自动启动:<span class="lg f12" :class="item.autorun ? 'green' : 'red'">{{ item.autorun ? '启动' : '关闭'
                }}</span></div>
                <div>创建时间:<span class="lg f12">{{ formatTimestamp(item.createTime) }}</span></div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref, computed } from 'vue';
const emit = defineEmits(['click', 'delResult']);
import { useRouter } from 'vue-router';
import { useDialog, useMessage } from "naive-ui";

const router = useRouter();

const message = useMessage();
const dialog = useDialog();
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
});

const options = [
    // {
    //     label: "修改这名称",
    //     key: "updateName",
    //     disabled: false
    // },
    {
        label: "删除服务器",
        key: "delectItem",
        disabled: false
    },
    // {
    //     label: "分享服务器",
    //     key: "sharingServer"
    // }
];


function handleSelect(key) {
    if (key == 'delectItem') {
        // 删除指定服务器
        if (props.item.isRun) {
            message.error('请先停止运行再来删除！');
            return;
        }
        const del = dialog.warning({
            title: "温馨提示",
            content: `你确定要删除 [ ${props.item.name} ] 这个服务器吗？无法恢复了！`,
            positiveText: "删除",
            negativeText: "取消",
            closable: false,
            closeOnEsc: false,
            maskClosable: false,
            onPositiveClick: () => {
                del.loading = true;
                del.negativeText = '';//隐藏取消按钮
                del.content = `正在删除 [ ${props.item.name} ] 请等待！`;//修改信息
                return new Promise((resolve) => {
                    window.api.delectItem(props.item.uuid).then(res => {
                        emit('delResult', res);
                        resolve();
                    });
                });
            }
        });

        return;
    }
}

/**
 * 获取日期时间
 * @returns 
 */
function formatTimestamp(timestamp) {
    const date = new Date(timestamp);

    const year = date.getFullYear();
    const month = ("0" + (date.getMonth() + 1)).slice(-2);
    const day = ("0" + date.getDate()).slice(-2);

    const hours = ("0" + date.getHours()).slice(-2);
    const minutes = ("0" + date.getMinutes()).slice(-2);
    const seconds = ("0" + date.getSeconds()).slice(-2);

    const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

    return formattedDate;
}

</script>
  
<style lang="scss" scoped>
.card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;

    .left-side {
        width: 12px;
        height: 150px;
        background-color: #08a608;
    }

    .sidered {
        background-color: red !important;
    }

    .right-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 135px;
        padding: 5px 10px;

        .title-box {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            align-items: center;
            z-index: 50;

            .iconfont {
                font-weight: bold;
                cursor: pointer;

                &:hover {
                    color: #fd0d0d;
                }
            }
        }

        .descriptor {
            height: 90px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .red {
                color: red !important;
            }

            .green {
                color: green !important;
            }

            .lg {
                margin-left: 5px;
                letter-spacing: 1.5px;
            }

            .f12 {
                font-size: 12px;
            }
        }
    }
}
</style>